<template>
  <div>
    <BaseForm :fields="searchFields" :form-data="formData" :inline="true">
      <template #footer-button>
        <div class="text-right w-full">
          <el-button size="medium" icon="el-icon-search" type="success" @click="treeMenu">搜索</el-button>
          <EditFormButton :url="saveOrUpdate"
                          size="medium"
                          class="mar-rl-10px"
                          icon="el-icon-plus"
                          @success="treeMenu"
                          type="primary"
                          :fields="editFields"
                          :form-data="addFormData">添加</EditFormButton>
        </div>
      </template>
    </BaseForm>
    <el-table :data="list"
              border
              size="medium"
              highlight-current-row
              row-key="menuId"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column label=" " prop="" :width="60" align="center"></el-table-column>
      <el-table-column label="序号" prop="index" :width="80"></el-table-column>
      <el-table-column label="菜单图标" prop="icon" :width="100">
        <template v-slot:default="{row , $index}">
          <i :class="row.icon" class="font-20px"></i>
        </template>
      </el-table-column>
      <el-table-column label="菜单名称" prop="name"></el-table-column>
      <el-table-column label="菜单权限" prop="permission"></el-table-column>
      <el-table-column label="菜单序号" prop="sortOrder" :width="80"></el-table-column>
      <el-table-column label="菜单路径" prop="path" show-overflow-tooltip></el-table-column>
      <el-table-column label="菜单类型" prop="type">
        <template v-slot:default="{row,$index}">
            <el-tag type="primary" v-if="row.type == 1" size="mini">按钮</el-tag>
            <el-tag type="success" v-else-if="row.type == 0 && row.leaf" size="mini">路由</el-tag>
            <el-tag type="info" v-else size="mini">菜单</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>
      <el-table-column type="action" label="操作">
        <template v-slot:default="{row,$index}">
          <div class="dis-flex">
            <DeleteButton
                type="text"
                size="small"
                icon="el-icon-delete"
                :primary-id="row.menuId"
                @success="treeMenu"
                :url="deleteUrl">删除</DeleteButton>
            <EditFormButton :url="saveOrUpdate"
                            size="medium"
                            class="mar-rl-10px"
                            icon="el-icon-plus"
                            @success="treeMenu"
                            type="text"
                            :fields="editFields"
                            :form-data="row">编辑</EditFormButton>
            <EditFormButton :url="saveOrUpdate"
                            size="medium"
                            class=""
                            icon="el-icon-plus"
                            @success="treeMenu"
                            type="text"
                            :fields="editFields"
                            :form-data="{parentId:row.menuId }">添加</EditFormButton>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-right mar-t-10px">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script >
import {menuTree} from "api/admin/menu";
import website from "@/config/website";
import ApiResponse from "utils/ApiResponse";
import Service from "api/Service";

export default {
  name: 'Menu',
  data(){
    return {
      list: [] ,
      total: 0 ,
      current: 1 ,
      formData: {} ,
      deleteUrl: `${Service.xcdhBaseService}/menu` ,
      saveOrUpdate: `${Service.xcdhBaseService}/menu` ,
      addFormData:{
        parentId: -1
      } ,
      searchFields: [
        {
          title: '菜单名称',
          key: 'name'
        },
        {
          title: '路径',
          key: 'path'
        }
      ],

    }
  },
  mounted() {
    this.treeMenu() ;
  },
  computed:{
    editFields(){
      return [
        {
          title: '菜单名称',
          key: 'name',
          required: true,
          span: 12
        },
        {
          title: '父级目录',
          key: 'parentId',
          required: true ,
          is: 'MenuTreeSelect',
          span: 12,
          attrs:{
            props:{
              children: 'children',
              label: 'name'
            },
            data: this.list,
            url: `${Service.xcdhBaseService}/menu/menuList`
          }
        },
        {
          title: '路径',
          key: 'path',
          required: true ,
          span: 12
        },
        {
          title: '图标',
          key: 'icon',
          is: 'IconSelect',
          span: 12
        },
        {
          title: '菜单序号',
          key: 'sortOrder',
          is: 'number',
          span: 12
        },
        {
          title: '菜单权限',
          key: 'permission',
          span: 12
        }
      ]
    }
  },
  methods:{
    treeMenu(){
      menuTree({
        model: this.formData ,
        current: this.current ,
        size: website.pageSize
      }).then(res=>{
        ApiResponse.init(res).ok((data)=>{
          this.list = data.rows ;
          this.total = data.total ;
        })
      })
    }
  }
}
</script>

<style scoped>

</style>